<!--
 * @Descripttion:民工信息展示
 * @version:
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-09-05 14:50:55
 * @LastEditors: zhangfan
 * @LastEditTime: 2021-03-08 10:01:52
-->

<template>
  <div class="content">
    <el-row :gutter="10" class="screen">
      <el-col :span="7" class="elcol">
        <div class="left drawbg" style="margin-bottom: 10px">
          <div class="title">民工男女比例</div>
          <div id="femaleRatio" class="chartbg"></div>
        </div>
        <div class="left drawbg">
          <div class="title">民工开工比例</div>
          <div id="operatingRatio" class="chartbg"></div>
        </div>
      </el-col>
      <el-col :span="10" class="elcol">
        <div class="left drawbg middleTop" style="margin-bottom: 10px">
          <div class="title">民工年龄分布</div>
          <div id="ageDistribution" class="chartbg"></div>
        </div>
        <div class="left drawbg middleBottom">
          <div class="title">民工驻地分布</div>
          <div id="fieldDistribution" class="chartbg"></div>
        </div>
      </el-col>
      <el-col :span="7" class="elcol">
        <div class="left drawbg" style="margin-bottom: 10px">
          <!-- <div class="title">合同预警</div> -->
          <div id="contractWarning" class="chartbg"></div>
        </div>
        <div class="left drawbg">
          <div class="title">民工学历分布</div>
          <div id="educationalDistribution" class="chartbg"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  drawFemaleRatio,
  drawOperatingRatio,
  drawAgeDistribution,
  drawFieldDistribution,
  drawEducationalDistribution,
} from './workerInfomation/workerInfomation.js'
export default {
  name: 'workerInformation',
  data() {
    return {}
  },
  mounted() {
    this.getFemaleRatio()
    this.getOperatingRatio()
    this.getAgeDistribution()
    this.getFieldDistribution()
    this.getEducationalDistribution()
  },
  methods: {
    /**
     * @description:民工男女比例
     */
    getFemaleRatio() {
      const vm = this
      let sexChart = echarts.init(document.getElementById('femaleRatio'))
      sexChart.showLoading({
        text: 'loading',
        fontSize: '36',
        color: '#53FFAC',
        textColor: 'transparent',
        maskColor: 'transparent',
        zlevel: 0,
      })
      vm.axios({
        method: 'post',
        url: 'api-s/cs/commandcenter/base/empshowempscale',
        data: {},
      })
        .then((res) => {
          sexChart.hideLoading()
          let dataList = this.dataIntegration(
            { value: 'value', name: 'name' },
            res.data.result.dataList
          )
          drawFemaleRatio('femaleRatio', dataList)
        })
        .catch((error) => {
          // vm.$message({
          //   showClose: true,
          //   duration: 3000,
          //   message: "获取民工男女比例数据失败",
          //   type: "error",
          // });
        })
    },
    /**
     * @description:民工开工比例
     */
    getOperatingRatio() {
      const vm = this
      let sexChart = echarts.init(document.getElementById('operatingRatio'))
      sexChart.showLoading({
        text: 'loading',
        fontSize: '36',
        color: '#53FFAC',
        textColor: 'transparent',
        maskColor: 'transparent',
        zlevel: 0,
      })
      vm.axios({
        method: 'post',
        url: 'api-s/cs/commandcenter/base/empshowstartrate',
        data: {},
      })
        .then((res) => {
          sexChart.hideLoading()
          let dataList = this.dataIntegration(
            { value: 'value', name: 'name' },
            res.data.result.dataList
          )
          drawOperatingRatio('operatingRatio', dataList)
        })
        .catch((error) => {
          // vm.$message({
          //   showClose: true,
          //   duration: 3000,
          //   message: "获取民工开工比例数据失败",
          //   type: "error",
          // });
        })
    },
    /**
     * @description:民工年龄分布
     */
    getAgeDistribution() {
      const vm = this
      let sexChart = echarts.init(document.getElementById('ageDistribution'))
      sexChart.showLoading({
        text: 'loading',
        fontSize: '36',
        color: '#53FFAC',
        textColor: 'transparent',
        maskColor: 'transparent',
        zlevel: 0,
      })
      vm.axios({
        method: 'post',
        url: 'api-s/cs/commandcenter/base/empshowage',
        data: {},
      })
        .then((res) => {
          sexChart.hideLoading()
          let dataList = this.dataIntegration(
            { value: 'value', name: 'name' },
            res.data.result.dataList
          )
          drawAgeDistribution('ageDistribution', dataList)
        })
        .catch((error) => {
          // vm.$message({
          //   showClose: true,
          //   duration: 3000,
          //   message: "获取民工年龄分布数据失败",
          //   type: "error",
          // });
        })
    },
    /**
     * @description:民工驻地分布
     */
    getFieldDistribution() {
      const vm = this
      let sexChart = echarts.init(document.getElementById('fieldDistribution'))
      sexChart.showLoading({
        text: 'loading',
        fontSize: '36',
        color: '#53FFAC',
        textColor: 'transparent',
        maskColor: 'transparent',
        zlevel: 0,
      })
      vm.axios({
        method: 'post',
        url: 'api-s/cs/commandcenter/base/empshowstation',
        data: {},
      })
        .then((res) => {
          sexChart.hideLoading()
          drawFieldDistribution('fieldDistribution', res.data.result)
        })
        .catch((error) => {
          // vm.$message({
          //   showClose: true,
          //   duration: 3000,
          //   message: "获取项目分类数据失败",
          //   type: "error",
          // });
        })
    },
    /**
     * @description:民工学历分布
     */
    getEducationalDistribution() {
      const vm = this
      let sexChart = echarts.init(
        document.getElementById('educationalDistribution')
      )
      sexChart.showLoading({
        text: 'loading',
        fontSize: '36',
        color: '#53FFAC',
        textColor: 'transparent',
        maskColor: 'transparent',
        zlevel: 0,
      })
      vm.axios({
        method: 'post',
        url: 'api-s/cs/commandcenter/base/empshowempedu',
        data: {},
      })
        .then((res) => {
          sexChart.hideLoading()
          let dataList = this.dataIntegration(
            { value: 'value', name: 'name' },
            res.data.result.dataList
          ).filter((item) => {
            console.log(item.name)
            return item.name != null
          })
          console.log(dataList)
          drawEducationalDistribution('educationalDistribution', dataList)
        })
        .catch((error) => {
          // vm.$message({
          //   showClose: true,
          //   duration: 3000,
          //   message: "获取民工学历分布数据失败",
          //   type: "error",
          // });
        })
    },
  },
}
</script>

<style scoped lang="less">
.content {
  width: 100%;
  height: calc(100% - 46px);
  background: #1e4260;
  .screen {
    height: 100%;
    padding: 10px;
    .elcol {
      height: 100%;
      .drawbg {
        height: 100%;
        background: rgba(29, 65, 96, 0.5);
        position: relative;
        .chartListRightBottom {
          position: relative;
          display: inline-block;
          background-color: rgba(29, 65, 96, 0.5);
          width: calc(50% - 5px);
          height: 100%;
        }
        .title {
          height: 22px;
          position: absolute;
          top: 10px;
          left: 10px;
          font-size: 16px;
          line-height: 22px;
          color: #ffffff;
          letter-spacing: 0;
          font-weight: bold;
          &::before {
            content: '';
            background: #fed857;
            display: inline-block;
            width: 5px;
            height: 16px;
            margin-right: 10px;
            position: relative;
            top: 2px;
          }
          .desc {
            font-size: 14px;
            color: #7a8b9b;
          }
        }
        .info {
          width: 100%;
          font-size: 14px;
          color: #7193b2;
          text-align: center;
          position: absolute;
          top: 50px;
          left: 0;
          .dataNum {
            font-size: 20px;
            font-weight: bold;
            color: #53ffac;
            margin-bottom: 5px;
          }
        }
        .chartbg {
          height: 100%;
          overflow: hidden;
          .drawSelf {
            margin-top: 40px;
            height: calc(100% - 40px);
            padding: 10px;
            .drawSelfLi {
              height: calc(100% / 5);
              padding: 10px 0;
              border-top: 1px solid #1c405b;
              position: relative;
              &:last-child {
                border-bottom: 1px solid #1c405b;
              }
              .inlineB {
                height: 100%;
              }
              .imageBox {
                width: 34px;
                height: 36px;
                img {
                  width: 34px;
                  height: 36px;
                  position: absolute;
                  right: 5px;
                  top: 0;
                  bottom: 0;
                  margin: auto;
                }
              }
              .progress {
                width: calc(100% - 50px);
                height: 100%;
                line-height: 100%;
                .autoProgress {
                  // float: left;
                  vertical-align: top;
                  display: inline-block;
                  margin-top: 22px;

                  width: 100%;
                  height: 10px;
                  background-image: linear-gradient(
                    270deg,
                    #fed857 2%,
                    rgba(83, 255, 172, 0) 100%
                  );
                  border-radius: 5px;
                  border-radius: 5px;
                }
                .titleInfo {
                  // float: left;
                  display: inline-block;
                  margin-top: 10px;
                  p {
                    height: 50%;
                    text-align: center;
                  }
                  .name {
                    font-size: 12px;
                    color: #ffffff;
                  }
                  .value {
                    font-size: 14px;
                    color: #fed857;
                  }
                }
              }
            }
          }
        }
      }
      .left {
        width: 100%;
        height: calc((100% - 10px) / 2);
        background-color: #284a68;
      }
      .right {
        width: 100%;
        height: 100%;
        background-color: #284a68;
      }
      .middleTop {
        padding: 20px 0 0 10px;
        height: calc(65% - 5px);
        margin-bottom: 10px;
        background-color: #284a68;
      }
      .middleBottom {
        padding: 20px 0 0 10px;
        height: calc(35% - 5px);
        background-color: #284a68;
      }
    }
  }
}
#educationalDistribution {
  padding: 10px 0px 10px 0px;
  overflow: hidden;
}
</style>
